<template>
  <basic-dialog
    :ok-text="'提交'"
    :width="'40%'"
    :visible.sync="sendVisable"
    :title="'转派人员'"
    :handleClose="handleCloseDialog"
    :loadingBtn="submitLoading"
    :handle-ok="handleSubmit"
    :handle-open="handleOpen"
  >
    <el-form
      ref="submitForm"
      :model="submitForm"
      :rules="formValidate"
      label-width="90px"
    >
      <el-form-item label="发送人员" prop="sendingPersonId">
        <el-select
          style="width: 100%"
          v-model.trim="submitForm.sendingPersonId"
          placeholder="请选择发送人员"
          filterable
          remote
          @change="handleUserSelect"
          :remote-method="remoteMethod"
        >
          <el-option
            v-for="item in userOptions"
            :key="item.userId"
            :label="item.userName + item.jobNumber"
            :value="item.userId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发送部门" prop="sendingDepartment">
        <el-input v-model="submitForm.sendingDepartment" disabled />
      </el-form-item>
      <el-form-item label="转派说明" prop="redeployExplain">
        <el-input show-word-limit v-model.trim="submitForm.redeployExplain" maxlength="200" type="textarea" :rows="6" />
      </el-form-item>
      <el-form-item label="转派人" prop="creationName">
        <el-input v-model.trim="creationName" disabled />
      </el-form-item>
      <el-form-item label="转派日期:" prop="datetransfer">
        <el-date-picker
          style="width: 100%"
          v-model="datetransfer"
          type="datetime"
          placeholder="日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          disabled
        />
      </el-form-item>
    </el-form>
  </basic-dialog>
</template>

<script>
import BasicDialog from '@/components/BasicDialog';
import {
  turnToSendService,
  queryHrUserByNameService
} from '@api/supplier/returnVisteManage';

export default {
  components: {
    BasicDialog,
  },
  props: {
    sendVisable: {
      type: Boolean,
      default: false
    },
    supplierData: {
      type: Object,
    },
  },
  data () {
    return {
      submitLoading: false,
      submitForm: {
        sendingPersonId: '', // 发送人员Id
        sendingPersonName: '', // 名称
        sendingDepartmentId: '', // 部门Id
        sendingDepartment: '', // 部门名称
        redeployExplain: '', // 说明
      },
      creationName: '',
      datetransfer: '',
      formValidate: {
        redeployExplain: [
          { required: true, message: '请输入转派说明', trigger: 'blur' },
          { type: 'string', min: 1, max: 200, message: '最多输入200字', trigger: 'blur' }
        ],
        sendingPersonId: [
          { required: true, message: '请选择发送人员', trigger: 'change' }
        ],
      },
      userOptions: []
    }
  },
  methods: {
    // 人员
    async queryHrUserList (query) {
      const res = await queryHrUserByNameService({ userName: query })
      if (res) {
        this.userOptions = res.result
      } else {
        this.userOptions = []
      }
    },
    // 搜索人员
    remoteMethod (query) {
      if (query !== '') {
        this.queryHrUserList(query)
      } else {
        this.userOptions = [];
      }
    },
    // 选择人员
    handleUserSelect (val) {
      console.log(val)
      this.userOptions.map(item => {
        if (item.userId === val) {
          this.submitForm.sendingPersonName = item.userName;
          this.submitForm.sendingDepartmentId = item.departmentId;
          this.submitForm.sendingDepartment = item.departmentName;
        }
      })
    },
    // 提交
    handleSubmit () {
      this.$refs['submitForm'].validate((valid) => {
        if (valid) {
          this.turnToSendAction();
        }
      })
    },
    // 提交接口调用
    async turnToSendAction () {
      const res = await turnToSendService(
        { ...this.submitForm },
        state => { this.submitLoading = state }
      )
      if (res) {
        this.$message.success('提交成功')
        this.$emit('getTableData')
        this.handleCloseDialog()
      }
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:sendVisable', false);
    },
    handleOpen () {
      const userInfo = localStorage.userInfo ? JSON.parse(localStorage.userInfo) : {}
      this.creationName = userInfo?.userName;
      this.datetransfer = new Date()
      this.submitForm = {
        sendingPersonId: '', // 发送人员Id
        sendingPersonName: '', // 名称
        sendingDepartmentId: '', // 部门Id
        sendingDepartment: '', // 部门名称
        redeployExplain: '', // 说明
        ...this.supplierData
      }
      this.userOptions = []
    }
  }
}
</script>
